<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="visible" @close="closeDialog">
    <el-form ref="form" :model="form" label-width="80px" :visable="true">
      <el-row>
        <el-col :span="10"><el-form-item label="题型" placeholder="请选择题型" required>
          <el-select v-model="form.type" placeholder="请选择题型">
            <el-option label="单选题" value="单选题" />
            <el-option label="多选题" value="多选题" />
            <el-option label="判断题" value="判断题" />
            <el-option label="填空题" value="填空题" />
            <el-option label="案例题" value="案例题" />
          </el-select>
        </el-form-item></el-col>
        <el-col :span="10"><el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择难度">
            <el-option label="简单" value="Easy" />
            <el-option label="中等" value="Middle" />
            <el-option label="困难" value="Hard" />
          </el-select>
        </el-form-item></el-col>
      </el-row>
      <el-form-item label="类别">
        <el-select v-model="form.category" placeholder="请选择类别">
          <el-option label="劳动关系" value="劳动关系" />
          <el-option label="综合服务标准规范" value="综合服务标准规范" />
          <el-option label="党建理论知识" value="党建理论知识" />
          <el-option label="社会保险" value="社会保险" />
          <el-option label="就业创业" value="就业创业" />
          <el-option label="人事人才" value="人事人才" />
        </el-select>
      </el-form-item>
      <el-form-item label="题干">
        <el-input v-model="form.stem" type="textarea" />
      </el-form-item>
      <el-form-item v-if="checkType('单选题','多选题')" label="选项">
        <el-row>
          <el-col :span="1">#</el-col>
          <el-col :span="3"><el-button type="primary" @click="addOptionList">添加</el-button></el-col>
          <el-col :span="3"><el-button type="primary" @click="removeOptionList">删除</el-button></el-col>
        </el-row>
        <el-row v-for="(item,index) in optionList" :key="index">
          <el-col :span="1">{{ item }}:</el-col>
          <el-col :span="20"><el-input v-model="form.options[index]" :placeholder="'选项'+item" /></el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="checkType('填空题')" label="选项">
        <el-row>
          <el-col :span="2">#</el-col>
          <el-col :span="3"><el-button type="primary" @click="addOptionList">添加</el-button></el-col>
          <el-col :span="3"><el-button type="primary" @click="removeOptionList">删除</el-button></el-col>
        </el-row>
        <el-row v-for="(item,index) in optionList2" :key="index">
          <el-col :span="2">第{{ index }}空</el-col>
          <el-col :span="12"><el-input v-model="form.options[index]" :placeholder="'第'+index+'空'" /></el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="checkType('单选题')" label="答案">
        <el-select v-model="form.suggestionAnswer" placeholder="请选择答案">
          <el-option v-for="(item,index) in optionList" :key="index" :label="item" :value="index" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="checkType('判断题')" label="答案">
        <el-select v-model="form.suggestionAnswer" placeholder="请选择答案">
          <el-option v-for="(item,index) in tfList" :key="index" :label="item" :value="index" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="checkType('多选题')" label="答案">
        <el-select v-model="form.suggestionAnswers" multiple placeholder="请选择答案">
          <el-option v-for="(item,index) in optionList" :key="index" :label="item" :value="index" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="checkType('案例题')" label="答案">
        <el-input v-model="form.answer" type="textarea" />
      </el-form-item>
      <el-form-item label="解析">
        <el-input v-model="form.analysis" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { addQuestion, editQuestion } from '@/api/question'
export default {
  data() {
    return {
      form: {
        type: '',
        difficulty: '',
        category: '',
        analysis: '',
        stem: '',
        options: [],
        suggestionAnswer: null,
        suggestionAnswers: [],
        answer: ''
      },
      visible: false,
      optionList: ['A', 'B', 'C', 'D'],
      optionList2: ['A'],
      tfList: ['正确', '错误'],
      optionListAll: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      title: ''
    }
  },
  methods: {
    onCancel() {
      this.visible = false
      this.form = {}
    },
    checkType(...typeList) {
      return typeList.includes(this.form.type)
    },
    addOptionList() {
      this.optionList.push(this.optionListAll[this.optionList.length])
      this.optionList2.push(this.optionListAll[this.optionList.length])
    },
    removeOptionList() {
      this.optionList.splice(this.optionList.length - 1, 1)
      this.optionList2.splice(this.optionList.length - 1, 1)
      this.form.suggestionAnswers = []
    },
    onSubmit() {
      const data = Object.assign({}, this.form)
      data.options = JSON.stringify(this.form.options)
      data.suggestionAnswers = JSON.stringify(this.form.suggestionAnswers)
      if (this.type === 'edit') {
        editQuestion(data).then(res => {
          if (res.success) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.visible = false
          }
        })
      } else {
        addQuestion(data).then(res => {
          if (res.success) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.visible = false
          }
        })
      }
    },
    closeDialog() {},
    edit(record) {
      this.type = 'edit'
      this.visible = true
      this.form = record
      this.form.options = this.isJSON(this.form.options) ? JSON.parse(record.options) : record.options
      this.form.suggestionAnswers = this.isJSON(this.form.suggestionAnswers) ? JSON.parse(record.suggestionAnswers) : record.suggestionAnswers
    },
    add() {
      this.type = 'add'
      this.form = { options: [] }
      this.visible = true
    },
    isJSON(str) {
      if (typeof str === 'string') {
        try {
          const obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      }
    }

  }
}
</script>
